<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>仓库物料统计</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="queryStock" v-if="isPayUser!==null">
      <search-btn-view immediate btn-text="库存查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="exportExcel">导出excel</el-button>
        </template>
        <template slot="right">
          <table-col-show-select v-if="tableHideColumnKey!==null" :table-name="tableName" :current-column-name="currentColumnName"
            :hide-column.sync="tableHideColumnKey">
          </table-col-show-select>
        </template>
        <div slot="search-content">
          <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:4,isValid:1}" :search="search"
            :search-field="searchField" label-width="80px" input-width="180px">
            <template slot="append">
              <el-form-item label="仓库">
                <el-select clearable style="width:180px" v-model="search.warehouseType" placeholder="请选择仓库">
                  <el-option v-for="warehouse in warehouseTypes" :key="warehouse.value" :label="warehouse.label" :value="warehouse.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单价">
                <el-input-number is-decimal-zero v-model="search.startPrice" placeholder="单价最小值" :controls="false" :min="0" :max="search.endPrice"
                  :precision="2" style="width:110px"></el-input-number>
                <span>-</span>
                <el-input-number is-decimal-zero v-model="search.endPrice" placeholder="单价最大值" :controls="false" :precision="2"
                  :min="search.startPrice?search.startPrice:0" style="width:110px"></el-input-number>
              </el-form-item>
            </template>
          </sys-common-search>
        </div>
      </search-btn-view>
      <div class="warehouse-balance-stat">
        <label>金额汇总：</label>
        <span>{{totalMoney}}</span>
      </div>
      <div class="queryStock-table-div">
        <el-table fit stripe border :data="companyMaterialList" style="width:100%" height="parent" :hide-column-keys="getTableHideColumns()">
          <el-table-column prop="providerName" label="供应商" min-width="120px" header-align="center" key="providerName">
          </el-table-column>
          <el-table-column prop="materialName" label="物料名称" min-width="140px" key="materialName" header-align="center">
          </el-table-column>
          <el-table-column prop="model" label="规格" min-width="120px" key="model" header-align="center">
          </el-table-column>
          <el-table-column prop="color" label="编号" min-width="100px" key="color" header-align="center">
          </el-table-column>
          <el-table-column prop="materialDeptName" label="物料部门" min-width="100px" key="deptName" align="center"></el-table-column>
          <el-table-column prop="defaultWarehouse" label="仓库" min-width="80px" align="center" key="defaultWarehouse">
          </el-table-column>
          <el-table-column prop="count" label="库存数" min-width="100px" align="center" key="count">
            <template slot-scope="props">
              <div v-if="props.row.count!==''" class="table-flex">
                <span>{{props.row.count}}</span>
                <span>{{props.row.unit}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="materialUseCount" label="占用数" min-width="100px" align="center" key="materialUseCount"></el-table-column>
          <el-table-column prop="unitPrice" label="物料单价" min-width="100px" align="center" key="unitPrice">
          </el-table-column>
          <el-table-column v-if="isPayUser" column-key="productionUnitCount" label="生产库存数" width="100px" header-align="center"
            key="productionUnitCount">
            <template slot-scope="props">
              <span v-if="props.row.defaultWarehouse ==='原/辅料仓'">
                {{props.row.productionUnitCount}} 付
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="sumPrice" label="总价" min-width="100px" align="center" key="sumPrice">
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js"
  ]);
  importTableColShowConfigFiles();

</script>
<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    mixins: [tableColShowMixin('materialStockStat')],
    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        warehouseType: '',
        materialDept: '',
        startPrice: undefined,
        endPrice: undefined
      };
      return {
        loading: false,
        moment: moment,
        //金额汇总
        totalMoney: 0,
        //库存记录
        companyMaterialList: [],
        warehouseTypes: i18n.getDropDown('financeMgr.materialStockMoney.warehouseType', [1, 2, 3, 4, 6]),
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        searchField: ['materialName', 'model', 'color', 'providerName', 'materialDept'],
        isPayUser: null,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },
    created: function () {
      this.loading = true;
      var self = this;
      this.setUser().then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },
    methods: {
      setUser: function () {
        var self = this;
        return SysUtil.getUser().then(function (user) {
          var isPayUser = user.companyInfo.status === 1;
          self.isPayUser = isPayUser;
          return user;
        });
      },
      //点击查询
      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },
      searchData: function () {
        this.pagination.currentPage = 1;
        this.setCompanyMaterialList(true);
      },
      //点击页码
      pageChange: function () {
        this.setCompanyMaterialList();
      },
      setCompanyMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }
        var search = this.search;
        var postData = {
          isValid: 1,
          isFinance: 1
        };
        fields = ['warehouseType', 'materialName', 'model', 'color', 'providerName', 'startPrice', 'endPrice'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          var materialDeptId = materialDept.materialDeptId;
          postData.materialDeptId = materialDeptId;
        }

        var promiseList = [this.queryStockData(isSearch, postData)];

        if (isSearch) {
          promiseList.push(this.getTotalMoney(postData));
        }

        this.loading = true;
        var self = this;
        Promise.all(promiseList).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },
      getTotalMoney: function (postData) {
        var self = this;
        return ajaxRequest("companyMaterialCount/getCompanyMaterialCountPrice", postData)
          .then(function (totalMoney) {
            if (totalMoney === null) {
              totalMoney = 0;
            }
            totalMoney = _.round(totalMoney, 2);
            self.totalMoney = totalMoney;
          });
      },
      //请求数据
      queryStockData: function (isSearch, postData) {
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData.start = start;
        postData.length = pageSize;

        var self = this;
        return ajaxRequest("companyMaterialCount/getCompanyMaterialCountList",
          postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }
          var companyMaterialList = res.returnData;

          for (var i = 0; i < companyMaterialList.length; i++) {
            var material = companyMaterialList[i];
            var sumPrice = Math.floor(material.unitPrice * material.count * 100) / 100;
            material.sumPrice = sumPrice;
          }

          self.companyMaterialList = companyMaterialList;
          self.pagination.totalCount = res.iTotalRecords;
          return companyMaterialList;
        });
      },

      exportExcel: function () {
        var search = this.oldSearch;
        var postData = {
          isValid: 1,
          isFinance: 1
        };
        fields = ['warehouseType', 'materialName', 'model', 'color', 'providerName', 'startPrice', 'endPrice'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          var materialDeptId = materialDept.materialDeptId;
          postData.materialDeptId = materialDeptId;
        }
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();
        var path = `${basePath}/companyMaterialCount/exportExcelFileByCompanyMaterial?${formParam}`;
        window.open(path);
      }
    },
    components: {
      SysCommonSearch: SysCommonSearch,
      SearchBtnView: SearchBtnView
    }
  });

</script>

<style>
  .queryStock {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .queryStock .queryStock-table-div {
    flex: 1;
    overflow: auto;
  }

  .queryStock .queryStock-table-div .table-flex {
    display: flex;
    justify-content: space-between;
  }

</style>

</html>
